<template>
  <qx-table :dbRowClick="rowDblClick" :option="tableOption" :remoteData="remoteData">
    <template v-slot:top>
      <qx-form v-model="searchForm" :option="tableOption" isSearch @submit="startSearch"></qx-form>
    </template>
    <template v-slot:menuLeftR>
      <q-icon color="warning" name="mdi-map-marker-question cursor-pointer cursor-hover" size="1.5rem">
        <q-tooltip class="q-pa-md" v-bind="$tooltipAttr">{{ $t('Misc.DblClickRuleRowTips') }}</q-tooltip>
      </q-icon>
    </template>
  </qx-table>
  <q-modal v-model="modalVisible" v-model:loading="loading"
           :header="`${$t('Misc.SpecifyDetails', {name: $t('AGVCore.DispatchRule')})}`" :menuBtn="false"
           :persistent="false" width="620">
    <QInfo :columns="columns || []" :rowInfo="rowInfo" cols="2" headerWidth="100"></QInfo>
  </q-modal>
</template>
<script setup>
import { i18n } from 'boot/i18n.js'
import { getAPI } from 'src/api/index.js'
import { getRemoteData } from 'src/enum/ajaxRemoteData.js'
import { formatColumns } from './DispatchRuleField.js'
import { computed, onMounted, ref } from 'vue'

const rowInfo = ref({})
const AGVBrands = ref([])
const searchForm = ref({})
const loading = ref(false)
const modalVisible = ref(false)
const remoteData = ref({ dicUrl: '/tpm/yfagv/api/aivdExecLog/list' })
getRemoteData('agv_brand', '/yfagv/api/agvCfgBrand/list').then(data => (AGVBrands.value = data))
const columns = computed(() => formatColumns(AGVBrands.value))
const tableOption = computed(() => {
  return {
    span: 22, export: true, labelWidth: 110, searchSpan: 4, searchLabelWidth: 60, selection: 'single',
    column: [{
      label: `${i18n.t('AGVCore.RuleCode')}`, field: 'ruleCode', minWidth: 80, required: true
    }, {
      label: `${i18n.t('AGVCore.RuleName')}`, field: 'ruleName', required: true, minWidth: 80, topLeft: true
    }, {
      label: `${i18n.t('MapCore.TargetArea')}`, field: 'targetAreaCode', minWidth: 80
    }, {
      label: `${i18n.t('TaskCore.DispatchTaskGroupCode')}`, field: 'dispatchTargetPointName', minWidth: 80,
      search: false, required: true
    }, {
      label: `${i18n.t('TaskCore.DispatchTaskCode')}`, field: 'targetMinIdleAgvCnt', minWidth: 80,
      search: false, required: true
    }, {
      label: `${i18n.t('CreationTime')}`, field: 'createdTime', type: 'daterange', display: false, minWidth: 80
    }, {
      label: `${i18n.t('Remarks')}`, field: 'remark', type: 'textarea', minWidth: 100, search: false
    }]
  }
})

const rowDblClick = row => {
  loading.value = true
  modalVisible.value = true
  getAPI(`/tpm/yfagv/api/aivdRule/aivdRule/${row.ruleId}`, {}, data => {
    rowInfo.value = data
    loading.value = false
  }, () => {
    loading.value = false
  })
}
const formatSearchForm = () => {
  const params = { ...searchForm.value }
  if (searchForm.value.dateInfo?.from) {
    params.createdStartTime = params.dateInfo?.from
    params.createdEndTime = params.dateInfo?.to
    delete params.dateInfo
  }
  return { ...params }
}
const startSearch = (_, done) => {
  remoteData.value.params = formatSearchForm()
  remoteData.value.clearSelected = true
  if (done) done()
}
onMounted(startSearch)
</script>